<template>
  <a-table :columns="columns" :data-source="page.list" :pagination="pagination" @change="handleTableChange">
    <template #user_id="{ text }">
      <span>
        {{ text }}
      </span>
    </template>

    <template #user_name="{ text }">
      <span>
        {{ text }}
      </span>
    </template>
    <template #user_age="{ text }">
      <span>

        {{ text }}
      </span>
    </template>
    <template #email="{ text }">
      <span>

        {{ text }}
      </span>
    </template>
    <template #count="{ text }">
      <span>
        共{{ text }}次咨询
      </span>
    </template>

    <template #status="{ text }">
      <span>
        <a-tag>{{ text }}</a-tag>
      </span>

    </template>

    <template #action="{ record }">
      <el-link v-if="needPlus(record)" type="warning" @click="visible1 = true">追加</el-link>
      <a-divider type="vertical" style="color:blue"/>
      <el-link type="warning" @click="getResult(record),visible3 = true">查看</el-link>
    </template>
  </a-table>


  <!-- 申请审核情况 -->
  <el-dialog v-model="visible3" title="追加咨询申请" width="60%" :before-close="handleClose">

    <a-from>
      <option>{{ result }}</option>
    </a-from>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible3 = false">取消</el-button>
        <el-button type="primary" @click="visible3 = false">确认</el-button>
      </span>
    </template>
  </el-dialog>


  <!-- 追加咨询 -->
  <el-dialog v-model="visible1" title="追加咨询申请" width="60%" :before-close="handleClose">

    <a-from>
      <option>追加情况说明</option>
      <a-textarea v-model:value="value4" placeholder="追加咨询情况说明" allow-clear/>
    </a-from>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible1 = false">取消</el-button>
        <el-button type="primary" @click="visible1 = false, addconsult(record)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {
  post, setLocalToken,
  get,
  del,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
////////////////////////////////////////////
////////////////////////////////////////////

const visible1 = ref(false);
const visible3 = ref(false);


const value1 = ref("");
const value2 = ref();
const value4 = ref("");


const columns = [
  {
    dataIndex: "user_id", //
    title: "序号",
    slots: {
      customRender: "user_id",
    },
  },
  {
    dataIndex: "user_name", //
    title: "姓名",
    slots: {
      customRender: "user_name",
    },
  },
  {
    dataIndex: "user_age", //
    title: "年龄",
    slots: {
      customRender: "user_age",
    },
  },
  {
    dataIndex: "email", //
    title: "邮箱",
    slots: {
      customRender: "email",
    },
  },
  {
    dataIndex: "count", //
    title: "咨询次数",
    slots: {
      customRender: "count",
    },
  }, {
    dataIndex: "status", //
    title: "咨询状态",
    slots: {
      customRender: "status",
    },
  },

  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

const user = reactive({
  role_id: "",
  user_id: "",
  user_name: "",
  user_age: "",
  email: "",
  count: "",
  status: ""
});

const addition = reactive({
  state: 0,
  visit_id: "",
  comment: "",
  count: 0
})

const page = ref({});
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});


const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  post("/security/addconsult/getInfo", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page
    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);
const handleTableChange = (pagi, filters, sorter) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};
const needPlus = (record) => {
  if (record.state != 1 && record.state != 4 && record.state != 0 && record.count >= 8) {
    addition.visit_id = record.visit_id;
    return true;
  }
}

const addconsult = () => {
  addition.comment = value4.value;
  addition.count = value2.value;
  post("/security/addconsult/addConsult", addition).then((res) => {
    message.info("申请成功");
    getPage(1);
  });
}


const result = ref("")

const getResult = (record) => {
  addition.visit_id = record.visit_id;
  post("/security/addconsult/getResult", addition).then((res) => {
    result.value = res.message;
  })


}

////////////////////////////////////////////
</script>

<style>
</style>
